<template>
  <div class="goods-sku">
    <dl v-for="item in goods.specs " :key="item.name">
      <dt>{{item.name}}</dt>
      <dd>
          <template v-for="v in item.values" :key="v">
        <img   :src="v.picture"  :title='v.name' :alt="v.name" v-if="v.picture"  @click="select(item,v)" :class="{'selected':v.select,disabled:v.disabled}" >
        <span v-else @click="select(item,v)" :class="{'selected':v.select,disabled:v.disabled}">{{v.name}}</span>
          </template>

      </dd>
    </dl>
  </div>
</template>
<script>
import bwPowerSet from '@/vender/power-set'
const getMap = (sku) => {
  const obj = {}
  const a = []
  sku.forEach(v => {
    if (v.inventory > 0) {
      const arrt = v.specs.map(c => c.valueName)
      const arrs = (bwPowerSet(arrt))
      a.push(arrs)
      arrs.forEach(y => {
        const key = y.join('.')
        if (!obj[key]) {
          obj[key] = [v.id]
        } else {
          obj[key].push(v.id)
        }
      })
    }
  })
  console.log(a)

  return obj
}

const getsku = (v) => {
  const arr = []
  v.forEach((a, i) => {
    const obj = a.values.find(q => q.select === true)
    arr[i] = obj ? obj.name : undefined
  })

  return arr
}

const setstop = (pro, sku) => {
  pro.forEach((v, i) => {
    const selectArr = getsku(pro)
    v.values.forEach(item => {
      if (item.select) return
      selectArr[i] = item.name
      const key = selectArr.filter(v => v !== undefined).join('.')
      item.disabled = !sku[key]
    })
  })
}

const defa = (a, b) => {
  const obj = a.skus.find(i => i.id === b)
  obj && obj.specs.forEach((item, index) => {
    const value = a.specs[index].values.find(v => v.name === item.valueName)
    if (value)value.select = true
  })
}

export default {
  name: 'GoodsSku',
  props: {
    goods: {
      type: Object
    },
    sukid: {
      type: String
    }
  },
  setup (props, { emit }) {
    //   点击事件，高亮,获取点击的规格，设置禁用状态
    const select = (i, v) => {
      if (v.disabled) return
      if (v.select) {
        v.select = false
      } else {
        i.values.forEach(a => { a.select = false })
        v.select = true
      }
      // 获取当前点击的规格
      getsku(props.goods.specs)
      //   设置禁用状态
      setstop(props.goods.specs, pathmap)
      //   根据选定的规格返回sukid
      getsuk(props.goods, pathmap)
    }
    const getsuk = (goods, pathmap) => {
      const arr = getsku(goods.specs).filter(v => v !== undefined)
      // console.log('所有规格', JSON.stringify(goods.skus))
      if (arr.length === goods.specs.length) {
        const key = arr.join('.')
        const [sukid] = pathmap[key]
        const obj = goods.skus.find(c => c.id === sukid)
        // const { inventory, oldPrice, price, specs } = props.goods.skus.find(item => item.id === sukid)
        // const oldPrice = obj.oldPrice
        // const price = obj.price
        emit('change', {
          skuId: sukid,
          oldPrice: obj.oldPrice,
          price: obj.price,
          specs: obj.specs,
          inventory: obj.inventory,
          attrsText: obj.specs.map(item => `${item.name}：${item.valueName}`).join(' ')
        })
        console.log(obj)
      } else {
        emit('change', {})
      }
    }

    // 获取规格字典
    const pathmap = getMap(props.goods.skus)
    // console.log('sssssssssssssssssss', JSON.stringify(props.goods.skus))
    // 设置禁用
    setstop(props.goods.specs, pathmap)

    // 默认规格选中
    defa(props.goods, props.sukid)
    return { select, getMap, getsuk }
  }
}
</script>
<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
